import React from 'react'
import { UdDetail, IUdDetailItem } from '@/lib'
import PicturesGallery from '../PicturesGallery'
import './style.scss'

function SettledReviewDetail(props) {
  const agentTypeEnum = {
    0:'经销商',
    1:'分销商',
  }
  const qualifTypeEnum = {
    0:'公司',
    1:'个人',
  }

  const detailItems:IUdDetailItem[] = [
    {
      title: '所属品牌',
      dataIndex: 'brandName',
      col: { span: 8 },
    },
    {
      title: '申请主体',
      dataIndex: 'agentType',
      col: { span: 8 },
      render: (text) => {
        return agentTypeEnum[text]
      }
    },
    {
      title: '注册手机号',
      dataIndex: 'registerPhone',
      col: { span: 8 }
    },
    {
      title: '上级经销商',
      dataIndex: 'parentCode',
      col: { span: 8 },
      render: (text,model) => <div>{model['parentName']+'/'+text}</div>
    },
  ]

  const detailItems2:IUdDetailItem[] = [
    {
      title: '资质类型',
      dataIndex: 'qualifType',
      col: { span: 8 },
      render: (text)=>qualifTypeEnum[text]
    },
    {
      title: '公司名称',
      dataIndex: 'companyName',
      col: { span: 8 }
    },
    {
      title: '统一社会信用代码',
      dataIndex: 'socialCode',
      col: { span: 8 }
    },
    {
      title: '联系人',
      dataIndex: 'contact',
      col: { span: 8 }
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      col: { span: 8 }
    },
    {
      title: '联系地址',
      dataIndex: 'address',
      col: { span: 8 }
    },
    {
      title: '营业执照',
      dataIndex: 'businessLicense',
      col: { span: 24 },
      render: (text) => {
        const urls = [text]
        return <PicturesGallery urls={urls} />
      },
    },
  ]

  const detailItems3:IUdDetailItem[] = [
    {
      title: '所属管理区域',
      dataIndex: 'belongAreaName',
      col: { span: 8 }
    },
    {
      title: '关联业务人员',
      dataIndex: 'businessPersonName',
      col: { span: 8 }
    },
    {
      title: '业务员联系电话',
      dataIndex: 'businessPersonPhone',
      col: { span: 8 }
    },
    {
      title: '经销产品及区域',
      dataIndex: 'productAndArea',
      col: { span: 24 },
      className: 'settled-product-area-item',
      render: (text=[]) => {
        return (
          text.map(item=><div className='area-item'>{item}</div>)
        )
      }
    },
  ]

  const personalQualificatsItems = [
    {
      title: '资质类型',
      dataIndex: 'qualifType',
      col: { span: 8 },
      render: (text)=>qualifTypeEnum[text]
    },
    {
      title: '公司名称',
      dataIndex: 'companyName',
      col: { span: 8 }
    },
    {
      title: '姓名',
      dataIndex: 'name',
      col: { span: 8 }
    },
    {
      title: '身份证号码',
      dataIndex: 'idCard',
      col: { span: 8 }
    },
    {
      title: '身份证照片',
      dataIndex: 'idCardUrlOne',
      col: { span: 16 },
      render: (text) => {
        const fontImg = text
        const backImg = dataSource['idCardUrlTwo']
        const urls = [fontImg,backImg]
        return <PicturesGallery urls={urls} />
      },
    },
  ]

  const { dataSource } = props
  const qualificationDetailItems = dataSource?.qualifType == 1 ? personalQualificatsItems : detailItems2
  return (
    <>
      <UdDetail className='left-align-label' title="基本信息" dataSource={dataSource} items={detailItems} />
      <UdDetail className='left-align-label' title="资质认证" dataSource={dataSource} items={qualificationDetailItems} />
      <UdDetail className='left-align-label' title="其他信息" dataSource={dataSource} items={detailItems3} />
    </>
  )
}

export default React.memo(SettledReviewDetail)